<script setup lang="ts">
import { reactive, ref } from "vue";
import { formUpload } from "@/api/mock";

const originalFileName = ref("");
import { message } from "@/utils/message";
import { getUserInfo, updateUserInfo, type UserInfo } from "@/api/auth";
import type { FormInstance, FormRules } from "element-plus";
import ReCropperPreview from "@/components/ReCropperPreview";
import { createFormData, deviceDetection } from "@pureadmin/utils";
import { useUserStore } from "@/store/modules/user";
import uploadLine from "~icons/ri/upload-line";

defineOptions({
  name: "Profile"
});

const imgSrc = ref("");
const cropperBlob = ref();
const cropRef = ref();
const uploadRef = ref();
const isShow = ref(false);
const userInfoFormRef = ref<FormInstance>();

const userInfos = reactive({
  avatar: "",
  nickname: "",
  email: "",
  phone: "",
  description: ""
});

const rules = reactive<FormRules<UserInfo>>({
  nickname: [{ required: true, message: "昵称必填", trigger: "blur" }]
});

function queryEmail(queryString, callback) {
  const emailList = [{ value: "@qq.com" }, { value: "@126.com" }, { value: "@163.com" }];
  let results = [];
  let queryList = [];
  emailList.map(item => queryList.push({ value: queryString.split("@")[0] + item.value }));
  results = queryString
    ? queryList.filter(item => item.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0)
    : queryList;
  callback(results);
}

const onChange = uploadFile => {
  originalFileName.value = uploadFile.raw.name; // Store the original filename
  const reader = new FileReader();
  reader.onload = e => {
    imgSrc.value = e.target.result as string;
    isShow.value = true;
  };
  reader.readAsDataURL(uploadFile.raw);
};

const handleClose = () => {
  cropRef.value.hidePopover();
  uploadRef.value.clearFiles();
  isShow.value = false;
};

const onCropper = ({ blob }) => (cropperBlob.value = blob);

// 提交头像
const handleSubmitImage = () => {
  const formData = createFormData({
    files: new File([cropperBlob.value], originalFileName.value)
  });
  formUpload(formData)
    .then(({ code, data }) => {
      if (code === 200) {
        console.log("userInfos.avatar前:", new File([cropperBlob.value], "avatar"));
        userInfos.avatar = import.meta.env.VITE_BASE_URL + data?.url;
        console.log("userInfos.avatar:", userInfos.avatar);
        message("更新头像成功", { type: "success" });
        handleClose();
      } else {
        message("更新头像失败");
      }
    })
    .catch(error => {
      message(`提交异常 ${error}`, { type: "error" });
    });
};

// 更新信息
const onSubmit = async (formEl: FormInstance) => {
  await formEl.validate((valid, fields) => {
    if (valid) {
      updateUserInfo(userInfos)
        .then(async ({ code, data }) => {
          if (code === 200) {
            message("更新信息成功", { type: "success" });
            // Update local reactive object with data from backend response
            Object.assign(userInfos, data);
            const userStore = useUserStore(); // Get the store instance

            //这样可以确保使用最新的用户数据更新 store 的状态。
            await userStore.getUserInfo(); // Await the store action
            console.log("User info updated and store refreshed.");
          } else {
            message("更新信息失败");
          }
        })
        .catch(error => {
          message(`更新信息异常 ${error}`, { type: "error" });
        });
    } else {
      console.log("error submit!", fields);
    }
  });
};

getUserInfo().then(res => {
  Object.assign(userInfos, res.data);
});
</script>

<template>
  <div :class="['min-w-[180px]', deviceDetection() ? 'max-w-[100%]' : 'max-w-[70%]']">
    <h3 class="my-8!">个人信息</h3>
    <el-form ref="userInfoFormRef" label-position="top" :rules="rules" :model="userInfos">
      <el-form-item label="头像">
        <el-avatar :size="80" :src="userInfos.avatar" />
        <el-upload
          ref="uploadRef"
          accept="image/*"
          action="#"
          :limit="1"
          :auto-upload="false"
          :show-file-list="false"
          :on-change="onChange"
        >
          <el-button plain class="ml-4!">
            <IconifyIconOffline :icon="uploadLine" />
            <span class="ml-2">更新头像</span>
          </el-button>
        </el-upload>
      </el-form-item>
      <el-form-item label="昵称" prop="nickname">
        <el-input v-model="userInfos.nickname" placeholder="请输入昵称" />
      </el-form-item>
      <el-form-item label="邮箱" prop="email">
        <el-autocomplete
          v-model="userInfos.email"
          :fetch-suggestions="queryEmail"
          :trigger-on-focus="false"
          placeholder="请输入邮箱"
          clearable
          class="w-full"
        />
      </el-form-item>
      <el-form-item label="联系电话">
        <el-input v-model="userInfos.phone" placeholder="请输入联系电话" clearable />
      </el-form-item>
      <el-form-item label="简介">
        <el-input
          v-model="userInfos.description"
          placeholder="请输入简介"
          type="textarea"
          :autosize="{ minRows: 6, maxRows: 8 }"
          maxlength="56"
          show-word-limit
        />
      </el-form-item>
      <el-button type="primary" @click="onSubmit(userInfoFormRef)"> 更新信息 </el-button>
    </el-form>
    <el-dialog
      v-model="isShow"
      width="40%"
      title="编辑头像"
      destroy-on-close
      :closeOnClickModal="false"
      :before-close="handleClose"
      :fullscreen="deviceDetection()"
    >
      <ReCropperPreview ref="cropRef" :imgSrc="imgSrc" @cropper="onCropper" />
      <template #footer>
        <div class="dialog-footer">
          <el-button bg text @click="handleClose">取消</el-button>
          <el-button bg text type="primary" @click="handleSubmitImage"> 确定 </el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>
